import React, {DetailedHTMLProps, forwardRef, SelectHTMLAttributes} from 'react';
import styles from './Select.module.css';

export type TypeSelectProps = {
    id: string;
    name: string;
    label: string;
    options: { value: string; label: string }[];
} & DetailedHTMLProps<SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>;

const Select = forwardRef<HTMLSelectElement, TypeSelectProps>(
    ({
         id,
         name,
         label,
         options,
         ...props
     },
     ref
    ) => {
        return (
            <div className={styles.selectContainer}>
                <label htmlFor={id} className={styles.label}>
                    {label}
                </label>
                <div className={styles.selectWrapper}>
                    <select
                        id={id}
                        ref={ref}
                        name={name}
                        defaultValue={''}
                        className={styles.select}
                        {...props}
                    >
                        <option value="" disabled>
                            {label}
                        </option>
                        {options.map((option) => (
                            <option key={option.value} value={option.value}>
                                {option.label}
                            </option>
                        ))}
                    </select>
                </div>

            </div>
        );
    }
);

export default Select;
